<!--
 * @description: 
 * @Date: 2022-10-08 23:24:50
 * @LastEditTime: 2022-12-04 19:41:27
-->
<template>
  <div
    @click.stop="redirectUrl('tab://hotSearchWindow')"
    class="hotSearch cursor-pointer"
  >
    <div
      style="border-radius: var(--iconRadius)"
      v-if="RC == '1x1'"
      class="text-lg w-full h-full flex items-center bg-white justify-center"
    >
      <svg
        width="38"
        height="38"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M24 44C32.2347 44 38.9998 37.4742 38.9998 29.0981C38.9998 27.0418 38.8953 24.8375 37.7555 21.4116C36.6157 17.9858 36.3861 17.5436 35.1809 15.4279C34.666 19.7454 31.911 21.5448 31.2111 22.0826C31.2111 21.5231 29.5445 15.3359 27.0176 11.6339C24.537 8 21.1634 5.61592 19.1853 4C19.1853 7.06977 18.3219 11.6339 17.0854 13.9594C15.8489 16.2849 15.6167 16.3696 14.0722 18.1002C12.5278 19.8308 11.8189 20.3653 10.5274 22.4651C9.23596 24.565 9 27.3618 9 29.4181C9 37.7942 15.7653 44 24 44Z"
          fill="none"
          stroke="#ff0000"
          stroke-width="4"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <div v-if="RC != '1x1'" class="p-3">
      <div class="text-sm hover flex space-x-2 overflow-hidden w-full">
        {{ sp.name }}
      </div>
      <ul class="mt-1.5">
        <transition v-for="(item, index) in list" :key="index">
          <a @click.stop :href="item.url" target="__black">
            <li class="truncate leading-5 text-xs hotTop">
              {{ index + 1 }} {{ item.title }}
            </li>
          </a>
        </transition>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, onUnmounted, defineProps, watch } from "vue";
import ajax from "../../util/ajax";
import cache from "../../util/cache";
import emitter from "../../util/emitter";
import redirectUrl from "../../util/href";
const props = defineProps({
  data: { type: Object, default: () => ({ size: "1x1" }) },
});
const list = ref(cache.get("hotSearch", []));
const RC = ref(props.data.size);
const sp = ref(
  cache.get("hotSearchType", {
    name: "百度热搜",
    type: "baidu",
  })
);

const starts = () => {
  ajax({
    url: "/index/hotSearch",
    params: { type: sp.value.type },
  }).then(({ data, code }) => {
    if (code == 1) {
      list.value = [];
      let tmp = data.splice(0, 5);
      list.value.push(...tmp);
      cache.set("hotSearch", list.value);
    }
  });
};
starts();

const refresh = (data) => {
  RC.value = data.size;
};
const reload = () => {
  sp.value = cache.get("hotSearchType");
  starts();
};
emitter.on("hotSearchreload", reload);
onUnmounted(() => {
  emitter.off("hotSearchreload", reload);
});

if (props.data?.id) {
  watch(props.data, (e) => {
    refresh(e);
  });
}
</script>
<style scoped>
.hotTop {
  margin-top: 2px;
}

.hotSearch {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.785);
  backdrop-filter: blur(1px);
  background-position: center;
  background-size: cover;
  color: #fff;
  border-radius: var(--iconRadius);
}
</style>
